<template>
  <div class="mod-config">
    <table-view ref="view"
                :searchAttrs="searchAttrs"
                :primaryKey="primaryKey"
                :listApiName="listApiName"
                :deleteApiName="deleteApiName"
                :saveAuthName="saveAuthName"
                :deleteAuthName="deleteAuthName"
                :showAttrs="showAttrs"
                :optionWidth="300"
    >
      <template v-slot:header>
<!--        <el-button size="small" type="warning" @click="openChartDialog">图表</el-button>
        <el-button size="small" type="success" @click="exportClientWeightInfo" >导出所有库存</el-button>-->
      </template>
      <template v-slot:foot="{scope}">
<!--        <el-tooltip class="item" effect="dark" content="查询库存" placement="bottom" :hide-after="1800" :open-delay="800">
          <el-button size="small" type="text" @click="showInventory(R.path(['row', primaryKey], scope))">
            查询库存
          </el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="导出库存" placement="bottom" :hide-after="1800" :open-delay="800">
          <el-button size="small" type="text" @click="showClientVisible(R.path(['row', primaryKey], scope))">
            导出
          </el-button>
        </el-tooltip>-->
      </template>
    </table-view>

    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <el-dialog title="库存" :visible.sync="inventoryDialog"   height="250" v-loading="inventoryLoading" :fullscreen="true">
      <el-form :inline="true" :model="searchForm" >
        <el-form-item>
          <el-select v-model="productId" clearable filterable placeholder="请选择">
            <el-option
              v-for="item in productInfoList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <!--          <el-input v-model="searchForm.productId" placeholder="品名" clearable></el-input>-->
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="getDataListBySelectClient()">查询</el-button>

          <el-tooltip class="item" effect="dark" content="默认是剩余数量" placement="top-start">
            <el-button size="small" :disabled="dataListSelections.length <= 0" type="danger"  @click="asLossProductNumber()" >归为损耗</el-button>
          </el-tooltip>
        </el-form-item>
      </el-form>

      <el-table :data="inventoryDataList" border style="width: 100%;"  @selection-change="selectionChangeHandle" >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column prop="orderDetailNo" header-align="center" align="center" label="订单编号"></el-table-column>
        <el-table-column prop="productNo" header-align="center" align="center" label="品名"></el-table-column>
        <el-table-column prop="productId" header-align="center"  align="center" v-if="false" label="productId"></el-table-column>
        <el-table-column prop="orderProductNumber" header-align="center" align="center" label="订单数量"></el-table-column>
        <el-table-column prop="productWeight" header-align="center" align="center" label="克数"></el-table-column>
        <el-table-column prop="putInStorageValue" header-align="center" align="center" label="入库数量"></el-table-column>
        <el-table-column prop="allocationToValue" header-align="center" align="center" label="调拨入库数量"></el-table-column>
        <el-table-column prop="leaveStorageValue" header-align="center" align="center" label="出库数量"></el-table-column>
        <el-table-column prop="allocationFromValue" header-align="center" align="center" label="调拨出库数量"></el-table-column>
        <el-table-column prop="lossLightBottleValue" header-align="center" align="center" label="损耗数量"></el-table-column>
        <el-table-column prop="inventory" header-align="center" align="center" label="剩余数量"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[50, 100,200]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="inventoryDialog = false">取 消</el-button>
        <el-button type="primary" @click="inventoryDialog = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="客户库存筛选"
      :visible.sync="clientOrderStorageExportDialogVisible"
      width="50%"
    >

      <el-form label-position="left" label-width="80px" >
        <el-form-item label="订单时间">
          <el-date-picker
            v-model="clientDateTimeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="clientOrderStorageExportDialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="exportClientWeightInfo()">导 出</el-button>
    </span>
    </el-dialog>
    <!--  图表对话框  -->
    <normal-chart-dialog ref="charDialog"
                         :chartSearchObj="chartSearchObj"
                         :commitChartSearch="commitChartSearch"
    >
      <template v-slot:chart="{chart}">
        <radar-chart ref="chart"></radar-chart>
      </template>
    </normal-chart-dialog>
  </div>
</template>

<script>
import AddOrUpdate from './clientinfo-add-or-update'
import tableView from '@/components/tableView'
import basicMixins from '@/utils/commonViewMixins'
import radarChart from '@/views/charts/client/clientOrderRadarChart'
import {mRequest} from '@/utils/request'
import {getFormatDateTime,exportHandle,isAuth} from '@/utils'

export default {
  mixins: [basicMixins],
  data() {
    return {
      inventoryDataList: [],
      inventoryLoading: false,
      inventoryDialog: false,
      clientOrderStorageExportDialogVisible: false,
      searchForm: {},
      pageIndex: 1,
      pageSize: 50,
      totalPage: 0,
      selectClientId: '',
      productId: '',
      productInfoList: [],
      dataListSelections: [],
      clientDateTimeRange: '',
      chartSearchObj: {
        dataForm: {
          dateTimeRange: []
        },
        config: {
          dateTimeRange: {
            type: 'date',
            clearable: true,
            dateType: 'daterange',
            label: '时间范围'
          }
        }
      },
      searchAttrs: {
        clientName: {
          label: '客户名称',
          clearable: true,
          placeholder: '请输入客户名称'
        },
        clientCode: {
          label: '客户编码',
          clearable: true,
          placeholder: '请输入客户编码'
        }
      },
      primaryKey: 'id',
      listApiName: 'clientApi/listClientInfoListByOpenSea',
      deleteApiName: 'clientApi/deleteClientInfo',
      saveAuthName: 'client:clientinfo:save',
      deleteAuthName: 'client:clientinfo:delete',
      templateDownloadApiName: 'clientApi/downloadClientInfo',
      importApiName: 'clientApi/importClientInfo',
      showAttrs: {
        exhibitionName: {label: '展会'},
        companyName: {label: '公司名称'},
        clientName: {label: '姓名'},
        position: {label: '职位'},
        country: {label: '国家/编号'},
        phoneNumber: {label: '联系方式'},
        lastUpdateTime: {label: '最近一次联系',type: 'date'},
        respondInfo: {label: '回复情况'},
        remark: {label: '备注'},
/*        status: {
          label: '状态',
          type: 'radio',
          items: [
            {value: 0, text: '禁用', tagType: 'danger'},
            {value: 1, text: '正常'}
          ]
        }*/
      }
    }
  },
  components: {
    AddOrUpdate,
    tableView,
    radarChart
  },
  methods: {
    showInventory(id) {
      this.pageIndex=1
      this.selectClientId = id
      this.inventoryDialog = true
      this.inventoryLoading = true
      this.productId = ''
      this.getDataListBySelectClient()
      this.initProductInfoList()
    },
    initProductInfoList() {
      mRequest('productApi/getProductInfoList', {}, (res) => {
        this.productInfoList = this.R.pathOr([], ['data', 'list'], res)
      })
    },
    getDataListBySelectClient() {
      let params = {
        clientId: this.selectClientId,
        productId: this.productId,
        page: this.pageIndex,
        limit: this.pageSize
      }
      mRequest('orderApi/getOrderDetailPageByClientId', params, (res) => {
        const list = this.R.pathOr([], ['data', 'page','list'], res)
        const totalCount = this.R.pathOr([], ['data','page', 'totalCount'], res)
        this.totalPage = totalCount
        this.inventoryDataList = this.R.map((item) => ({
          orderDetailId: this.R.propOr('', 'id', item),
          orderDetailNo: this.R.propOr('', 'orderNo', item),
          orderProductNumber: this.R.propOr('0', 'orderProductNumber', item),
          productId: this.R.propOr('', 'productId', item),
          productNo: this.R.propOr(0, 'productNo', item),
          productWeight: this.R.propOr(0, 'productWeight', item),
          putInStorageValue: this.R.propOr(0, 'putInStorageValue', item),
          leaveStorageValue: this.R.propOr(0, 'leaveStorageValue', item),
          allocationFromValue: this.R.propOr(0, 'allocationFromValue', item),
          allocationToValue: this.R.propOr(0, 'allocationToValue', item),
          lossLightBottleValue: this.R.propOr(0, 'lossLightBottleValue', item),
          inventory: this.R.propOr(0, 'putInStorageValue', item)+
            this.R.propOr(0, 'allocationToValue', item) -
            this.R.propOr(0, 'leaveStorageValue', item)-
            this.R.propOr(0, 'allocationFromValue', item)-
            this.R.propOr(0, 'lossLightBottleValue', item)
        }), list)
        this.inventoryLoading = false
      })
    },
    asLossProductNumber() {
      let lossLightBottleInfoListVo={
        'clientId':this.selectClientId,
        'lossLightBottleInfoList': this.dataListSelections
      }
      console.log(lossLightBottleInfoListVo)
      mRequest('lossApi/saveMultipleLossLightBottleInfo', lossLightBottleInfoListVo, (data) => {
        if (data.data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500
          })

        } else {
          this.$message.error(data.data.msg)
        }
        this.getDataListBySelectClient()
      })

    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataListBySelectClient()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataListBySelectClient()
    },
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val

    },
    showClientVisible(id) {
      this.clientDateTimeRange = ''
      this.selectClientId = id
      this.clientOrderStorageExportDialogVisible = true

    },
    exportClientWeightInfo() {
      let startDateTime = ''
      let endDateTime = ''
      if (this.clientDateTimeRange instanceof Array) {
        startDateTime = getFormatDateTime(new Date(this.clientDateTimeRange[0]))
        endDateTime  = getFormatDateTime(new Date(this.clientDateTimeRange[1]))
      }
      exportHandle('orderApi/exportOrderStorageListByClientId', {
        startDateTime: startDateTime,
        endDateTime: endDateTime,
        clientId: this.selectClientId
      })
      this.selectClientId = null
      this.clientOrderStorageExportDialogVisible = false
    },
  }
}
</script>
